<script setup lang="ts">
  // 定义接受的 props 参数
  import { defineProps } from 'vue';

  const props = defineProps<{
    tip?: string;
  }>();
</script>

<template>
  <div class="login-loading">
    <div class="loading-spinner"></div>
    <span>{{ props.tip }}</span>
  </div>
</template>

<style scoped lang="scss">
  .login-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    z-index: 9999;

    span {
      margin-left: 10px;
      animation: fadeIn 1.5s infinite;
    }

    .loading-spinner {
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid #00d8d8;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    /* 旋转动画 */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* 渐显动画 */
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.7;
      }
      100% {
        opacity: 1;
      }
    }
  }
</style>
